<template>
  <div class="irrigationProgress">
    <TitleColumn name="钱仓圩概况" isColumn/>
    <div class="content">
      <div class="description">
        <div class="introduction">
          <h3 class="title">农业种植情况</h3>
          <p>钱仓示范片区位于新禹河灌区西北部，属长江中下游典型平原圩区，总面积6.95平方公里，圩区中间高、为居住区，四周低、为农作物种植区；其中水稻、小麦轮作种植面积3861.29亩，蔬菜种植面积452.22亩，苗木种植面积228.02亩，设施农业种植面积298.25亩，养殖水域面积606.94亩，合计5446.72亩。</p>
        </div>
        <div class="introduction">
          <h3 class="title">水利设施情况</h3>
          <p>片区农作物灌溉水源、排涝行洪道为新篁河分干渠，圩内与圩外的水量交换通过涵闸与泵站进行，目前片区有灌溉泵站4座、排涝泵站3座、灌排一体泵站4座、共24台机组，合计确权水量174.43万m³。涵闸共计9座，灌溉时通过打开涵闸将水引入渠池内，由泵站提水到支渠，再通过支渠到斗渠、农渠、毛渠；排涝时由泵站抽水到外河，将圩内水位降到安全阈值。</p>
        </div>
        <div class="introduction">
          <h3 class="title">本次建设情况</h3>
          <p>钱仓示范片区已建水位计13处，土壤墒情监测站3处，对24台泵站机组流量进行了自动采集，接入雨情数据13处、卫星遥感数据、气象预报数据，实现了片区的天空地立体感知体系建设。依托片区精细化数字底板和立体感知体系数据，构建“需、供、配、调”水四级模式，结合片区内用水大户灌溉现状和苏南地区农水试验田数据，创新性提出“产量最优”、“品质最优”、“节水优先”和“综合调度”4种需水调度模型，有效改变了按照经验供水的模式。</p>
        </div>
        <div class="introduction">
          <h3 class="title">片区建设成效</h3>
          <p>新禹河数字孪生灌区作为新型的灌溉管理技术，依托钱仓示范片区精细化数字底板，构建“南方多水源蓄引提”数字大田样板，动态测算分析农作物生长周期，精准测定不同时期、不同区域的需水量，有效提高了水资源利用效率，促进了灌溉管理智能化、决策科学化，实现了新禹河灌区“旱能浇、涝能排、洪能防”特色灌排体系。针对近年来旱涝急转现象频发的问题，依托数字孪生灌区强化水网联动、统筹调度供排水，实现节水、减排、增效，亩均综合节水10%左右，农药化肥使用量减少约20%，效益增加10%以上。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';

  defineOptions({ name: 'IrrigationProgress' });

  const state = reactive({
    list: [
      {name: '陈林种植大户', num: 30, ratio: '14.69'},
      {name: '杨定伍种植大户', num: 50, ratio: '34.11'},
      {name: '徐志国种植大户', num: 30, ratio: '34.45'},
      {name: '鲍桂林种植大户', num: 46, ratio: '14.69'},
      {name: '朱存喜种植大户', num: 30, ratio: '15.89'},
      {name: '翟跃进种植大户', num: 87, ratio: '14.69'},
      {name: '张义俭种植大户', num: 30, ratio: '14.69'},
      {name: '朱太兵种植大户', num: 32, ratio: '14.69'},
      {name: '杨定松种植大户', num: 48, ratio: '54.67'},
      {name: '夏兆壮种植大户', num: 33, ratio: '23.65'},
      {name: '彭延兵种植大户', num: 30, ratio: '14.69'},
      {name: '陈传金种植大户', num: 66, ratio: '14.69'},
    ],
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .irrigationProgress {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
    box-sizing: border-box;
    background: #02123433;
    backdrop-filter: blur(10px);
    .content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      padding: 6px 10px;
      .description {
        height: 100%;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
        h3.title {
          font-size: 14px;
          color: #fff;
          padding-top: 6px;
          margin-bottom: 2px;
          display: flex;
          align-items: center;
          &::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(./images/decorate.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 4px;
          }
        }
        .introduction {
          p {
            color: #B4DFFF;
            font-size: 11px;
            padding-left: 6px;
          }
        }
        .duties {
          p {
            color: #B4DFFF;
            font-size: 11px;
            display: flex;
            padding-left: 20px;
            position: relative;
            margin-bottom: 4px;
            &::before {
              content: attr(data-text);
              display: inline-block;
              width: 16px;
              height: 16px;
              color: #B4DFFF;
              background: #0C5975;
              box-shadow: 0px 0px 4px 0px #23DF7B52 inset;
              border: 1px solid #20F8FF;
              border-radius: 50%;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              left: 0px;
              top: 4px;
            }
          }
        }
      }
    }
  }
</style>
